<template>
  <region-selects
    ref="vRegion"
    v-model="selected"
    :town="town"
    :disabled="disabled"
    :search="search"
    @change="selectLogs"
  />
</template>

<script>
import { RegionSelects } from 'v-region'
export default {
  name: 'WiseRegion',
  components: { RegionSelects },
  props: {
    value: {
      type: Object
    },
    disabled: {
      type: Boolean,
      default: false
    },
    city: {
      type: Boolean,
      default: true
    },
    area: {
      type: Boolean,
      default: true
    },
    town: {
      type: Boolean,
      default: true
    },
    search: {
      type: Boolean,
      default: false
    },
    objKeys: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selected: {}
    }
  },
  watch: {
    // selected(v) {
    //   console.log(v);
    //   this.$emit("on-value", v);
    // },
    value(val) {
      if (val && val.province) {
        this.selected = {
          province: val.province.key,
          city: val.city ? val.city.key : null,
          area: val.area ? val.area.key : null,
          town: val.town ? val.town.key : null
        }
      } else {
        this.selected = { province: null, city: null, area: null, town: null }
      }
    }
  },
  mounted() {
    if (this.value && this.value.province) {
      this.selected = {
        province: this.value.province.key,
        city: this.value.city ? this.value.city.key : null,
        area: this.value.area ? this.value.area.key : null,
        town: this.value.town ? this.value.town.key : null
      }
    } else {
      this.selected = { province: null, city: null, area: null, town: null }
    }
  },
  methods: {
    selectLogs(value) {
      if (this.objKeys && this.objKeys.length > 0) {
        const arry = []
        this.objKeys.forEach((item) => {
          if (value[item.key]) {
            arry.push({
              field: item.field,
              value: value[item.key][item.value]
            })
          } else {
            arry.push({
              field: item.field,
              value: ''
            })
          }
        })
        this.$emit('on-value', arry)
      }
    }
  }
}
</script>

<style scoped>
</style>
